<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/foot.css">
    <!-- <link rel="stylesheet" href="../css/self-center.css"> -->
    <style>
        .buycar-mid{
            width: 80%;
            height: 1000px;
            margin:auto;
            /* border: 1px solid black; */
            background-color:white;

        }
    #buycar-outer{
       /* background-image: url(../img/7.jpg); */
       /* border: 1px solid black; */
       width: 100%;
       height: 100%;
}
.buycar-rearch{
            width: 100%;
            height: 150px;
            margin:auto;
            /* border: 1px solid black; */
}

.buycar-mid01{
            width: 100%;
            height: 30px;
            margin:auto;
            /* border: 1px solid black; */
}



.buycar-mid02{
            width: 100%;
            height: 40px;
            margin:auto;
            /* border: 1px solid black; */
}
.buycar-mid03{
            width: 100%;
            height: 30px;
            margin:auto;
            /* border: 1px solid black; */
}

.buycar-mid04{
            width: 100%;
            height: 40px;
            margin:auto;
            /* border: 1px solid black; */
}
.buycar-product{
            width: 100%;
            height: 200px;
            margin:auto;
            /* border: 1px solid black; */
            
}
.buycar-product02{
            width: 100%;
            height: 200px;
            margin:auto;
            /* border: 1px solid black; */
            
}
.buycar-product03{
            width: 100%;
            height: 200px;
            margin:auto;
            /* border: 1px solid black; */
            
}

.buy-select01{
    width: 100%;
    height: 120px;
    
}
.m3{
            width: 200px;
            height: 200px;
}
.m4{
            width: 100px;
            height: 100px;
}

    </style>
</head>
<body>
    <div id="buycar-outer">
        
        <script src="../plugins/layui/layui-v2.5.6/layui/layui.js"></script>
        <script src="../js/offies.js"></script>
        <script>


          layui.use(['form', 'element'], function(){
         var element = layui.element; 
        var form=layui.form;
     
     //监听导航点击
     element.on('nav(demo)', function(elem){
     //console.log(elem)
     layer.msg(elem.text());

     form.on('select(phone_type)', function(data){
        // console.log(data.elem.checked); //是否被选中，true或者false
        console.log(data.value); //复选框value值，也可以通过data.elem.value得到
    });
     });
    });
        </script>

                  
<div class="nav">
    <div style="padding-left: 80px;">
    <i class="layui-icon layui-icon-home" style="font-size: 20px; color: gray;"></i> 
   <a href="../index.html">店铺首页</a>
    <i class="layui-icon layui-icon-location" style="font-size: 20px; color: gray;"></i>
    安徽
    <div class="nav2">
        <span class="layui-breadcrumb" lay-separator="|" style="padding-left: 90px;">
            <a href="../view/login.html">登录</a>
            <a href="..view/register.html">注册</a>
            <a href="../view/self-center.html">个人中心</a>
            <a href="../view/order.html" style="padding-left:20px ;">我的订单</a>
            <a href="../view/collect.html"style="padding-left:20px ;">我的生鲜</a>
            
            <a href="../view/seckile.html"style="padding-left:20px ;">限时秒杀</a>
            <a href="../view/forum.html"style="padding-left:20px ;">好物推荐</a>
           
          </span>              
    </div>
    </div>
</div>

        

        <div class="buycar-mid">
            <div class="buycar-rearch">

               
                <div class="nav-logo">
                    <div class="search">
                        <div class="layui-container">
                            <!-- 定义行 -->
                            <div class="layui-row">

                                <div class="layui-col-md3">
                            <img src="../img/10.png" style="height: 150px;">
                        </div>
            
                        <div class="layui-col-md6" style="margin-top: 50px; text-align: center;">
                            <span id="parent">
                                <span class="c1"></span>
                                <span>
                                    <input type="text" id="search">
                                </span>
                                <span style="position: relative;">
                                    <a href="../view/product-class.html"><button class="b1">搜索</button></a>
                        
                                </span> 
                            </span> 
                        </div>


                            </div>
                        </div>

                    </div>
                </div> 
            </div>
            <hr class="layui-bg-green">

            <div class="buycar-mid01">
               <a>全部商品配送至</a>
                <!-- <span id="fc1" style="color:cornsilk; font-size: 10px; font-family: '宋体' serif;">配送至</span> -->
                

                <select name="city" lay-verify="" style="margin-left: 800px;">
                    <option value="">省</option>
                  </select> 
                  <select name="city" lay-verify="">
                    <option value="">市</option>
                  </select>     
                  <select name="city" lay-verify="">
                    <option value="">县</option>
                  </select>     
                  <select name="city" lay-verify="">
                    <option value="">乡/镇/区</option>
                  </select>   
                   
            </div>

          

            <div class="mid-inner" style="margin: auto; width: 100%; height: 500px; border: 1px solid #efefef;">

                <div class="buycar-mid02 layui-form" style="background-color: #efefef;">
                    <input type="radio" name="sex" value="nan" title="全选">
                    <a id="fc1" style="  margin-left: 150px;">商品</a>
                    <a id="fc1" style="  margin-left: 300px;">单价</a>
                    <a id="fc1" style="  margin-left: 100px;">数量</a>
                    <a id="fc1" style="  margin-left: 100px;">小计</a>
                    <a id="fc1" style="  margin-left: 100px;">操作</a>
    
                </div>
    
             
    
                <div class="buycar-mid03" >
                    <a>商家：海南水产</a>
                </div>
    
               
        
                <div class="buycar-mid04">
                    <span class="layui-breadcrumb">
                        <span id="fc1" style=" font-size: 20px; font-family: '宋体' serif; color: red;">满减</span>
                        <a style="margin-left: 50px;">活动商品购满¥166.00， 即可享受满减且中国内地包邮</a>
                      </span>    
        
                </div>
    
               
    
    
        <div class="buycar-product">
    
            <div class="buy-select01" style="border: 1px solid #efefef; background-color: #f0f0f8;">
            <div class="layui-container">
                <!-- 定义行 -->
                <div class="layui-row">
                    <!-- 定义列
                     md - 中屏 3代表的是元素所占的宽度
                    -->
                    <div class="layui-col-md1 layui-form" style="margin-top: 40px;">
                        <input type="checkbox" name="" title="选择" checked>
                    </div>
                   
                    <div class="layui-col-md2" style="margin-top: 10px;">
                        <img src="../img/8.jpg" class="m4" alt="">
                    </div>
                    <div class="layui-col-md2">
                       <a>商品介绍</a>
                       <p style="margin-top: 30px;">海南千禧圣女果 小西红柿 番茄 约1kg 新鲜水果 </p> 
                    </div>
                    
                     
                
                     <div class="layui-col-md1"style="margin-left: 70px;">
                        <a>单价</a>
                        <p style="margin-top: 40px;">100</p>
                     </div>

                     <div class="layui-col-md1" style="margin-left: 40px;">
                        <a>数量</a>
                        <p>
                            <select name="color" lay-verify="" style="margin-top: 40px;">
                                <option value="">请选择数量</option>
                              </select>
                            </p>   
                     </div>

                     <div class="layui-col-md1" style="margin-left: 40px;">
                        <a>小计</a>
                        <p style="margin-top: 40px;">100</p>
                     </div>
    
                     <div class="layui-col-md2">
                        <div class="layui-btn-group" style="margin-top: 40px;">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                              <i class="layui-icon">&#xe654;</i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                              <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                              <i class="layui-icon">&#xe640;</i>
                            </button>
                          </div>
                     </div>
    
                </div>
            </div>
    
        
    
            <div class="buy-select02 layui-form" style="text-align: center; margin-top: 50px"> 
                <a href="../index.html" class="layui-btn layui-btn-primary">添加商品到购物车</a>
            </div>
        </div>
    
    
        </div>
    
        <hr class="layui-bg-gray">
    
        <div class="over layui-form" style="width: 100%; height: 50px; ">
            <div class="layui-container">
                <!-- 定义行 -->
                <div class="layui-row">
                    <!-- 定义列
                     md - 中屏 3代表的是元素所占的宽度
                    -->
                    <div class="layui-col-md8 layui-form">
                        <input type="checkbox" name="" title="全选" checked>
                    </div>
    
                    <div class="layui-col-md1 layui-form">
                        <a>总价100</a>
                    </div>
    
                    <div class="layui-col-md1 layui-form">
                        <a href="../view/account.html" class="layui-btn layui-btn-danger">结算</a>
                    </div>
    
                    <div class="layui-col-md1" style="margin-left: 90px;">
                        <a>全删</a>
                       
                     </div>
    
    
    
    
                </div>
            </div>
        </div>


            </div>
        
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>猜你喜欢</legend>
              </fieldset>



 <div class="product03" style="height: 250px; width: 100%; ">

    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center;">
                <img src="../img/11.jpg" style="height: 200px; ">
                <p style="font-size: 40px; color:red;">￥51.9</p>
                <p class="t-c"> 
                 京东超市
                 进口红西柚 一级中果 6粒家庭装 单果重200g起 进口新鲜水果柚子 美国</p>
                 <p class="t-c">46万+条评价</p>

                 <div class="site-demo-button" id="layerDemo" style="margin-top:20px ;">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                        <i class="layui-icon">&#xe68f</i>
                      </button>
                      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                        <i class="layui-icon">&#xe657</i>
                      </button>
                      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                        <i class="layui-icon">&#xe641</i>
                      </button>
                  </div>
                </div>

                <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center;">
                    <img src="../img/11.jpg" style="height: 200px; ">
                    <p style="font-size: 40px; color:red;">￥51.9</p>
                    <p class="t-c"> 
                     京东超市
                     进口红西柚 一级中果 6粒家庭装 单果重200g起 进口新鲜水果柚子 美国</p>
                     <p class="t-c">46万+条评价</p>

                     <div class="site-demo-button" id="layerDemo" style="margin-top:20px ;">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                            <i class="layui-icon">&#xe68f</i>
                          </button>
                          <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                            <i class="layui-icon">&#xe657</i>
                          </button>
                          <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                            <i class="layui-icon">&#xe641</i>
                          </button>
                      </div>
                    </div>

                    <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center;">
                        <img src="../img/11.jpg" style="height: 200px; ">
                        <p style="font-size: 40px; color:red;">￥51.9</p>
                        <p class="t-c"> 
                         京东超市
                         进口红西柚 一级中果 6粒家庭装 单果重200g起 进口新鲜水果柚子 美国</p>
                         <p class="t-c">46万+条评价</p>
 
                         <div class="site-demo-button" id="layerDemo" style="margin-top:20px ;">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                <i class="layui-icon">&#xe68f</i>
                              </button>
                              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                <i class="layui-icon">&#xe657</i>
                              </button>
                              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                <i class="layui-icon">&#xe641</i>
                              </button>
                          </div>
                        </div>

                        <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center;">
                            <img src="../img/11.jpg" style="height: 200px; ">
                            <p style="font-size: 40px; color:red;">￥51.9</p>
                            <p class="t-c"> 
                             京东超市
                             进口红西柚 一级中果 6粒家庭装 单果重200g起 进口新鲜水果柚子 美国</p>
                             <p class="t-c">46万+条评价</p>
     
                             <div class="site-demo-button" id="layerDemo" style="margin-top:20px ;">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                    <i class="layui-icon">&#xe68f</i>
                                  </button>
                                  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                    <i class="layui-icon">&#xe657</i>
                                  </button>
                                  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                    <i class="layui-icon">&#xe641</i>
                                  </button>
                              </div>
                            </div>

                     

                


            </div>
         </div>
     </div> 

   


</div>

<hr class="layui-bg-gray">


        <div class="bott">
            <div class="bott-f">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="../img/duo.png" alt="">品类齐全,轻松购物</li>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="../img/kuai.png" alt="">多仓直发,极速配送</li>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="../img/hao.png" alt="">正品行货,精致服务</li>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div style="font-size: 10px;">
                            <li><img src="../img/sheng.png" alt="">天天低价,畅选无忧</li>
                        </div>
                    </div>
                </div>
    
                <div class="layui-row" style="margin-top: 15px;">
                    <div class="layui-col-md3">
                        <div>
                            <dt>购物指南</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">购物流程</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">会员介绍</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">常见问题</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">热销商品</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">联系客服</a>
                            </dd>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div>
                            <dt>配送方式</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">上门自提</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">211限时达</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">配送服务查询</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">配送费收取标准</a>
                            </dd>
                            <dd>
                                <a target="_blank" href="#">海外配送</a>
                            </dd>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div>
                            <dt>支付方式</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">货到付款</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">在线支付</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">分期付款</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">公司转账</a>
                            </dd>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div>
                            <dt>售后服务</dt>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">售后政策</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">价格保护</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">退款说明</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">返修/退换货</a>
                            </dd>
                            <dd>
                                <a rel="nofollow" target="_blank" href="#">取消订单</a>
                            </dd>
                        </div>
                    </div>
                </div>
            </div>

    </div>

    






        </div>
        </div> 
</body>
</html>